import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import './index.css';
import Ajax from '../../common/ajax';

class NearShop extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 106,
            isOnly: true,
            style: {
                marginBottom: '10px'
            },
            dataset: {},
            layout: {}
        }
    };


    constructor(props) {
        super(props);
        this.state = {
            nearShop: {},
        };

        this._fetch = this._fetch.bind(this);
    }

    componentDidMount() {
        this._fetch();
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {dataset, style, layout} = data;
        var {nearShop} = this.state;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'nearShopSection cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className="nearShopSection__title">
                    最近门店
                    <div className="nearShop__link">所有门店</div>
                </div>
                <div className="nearShopSection__content">
                    {
                        nearShop && nearShop.id ?
                            <div className="nearShop">
                                <div className="nearShop__info">
                                    <div className="nearShop__name">{nearShop.title}</div>
                                    <div
                                        className="nearShop__distance">{nearShop.juli}</div>
                                </div>
                                <div className="shopInfoItem">
                                    <span className="shopInfoItem__icon shopInfoItem__icon_phone"></span>
                                    <span className="shopInfoItem__text">{nearShop.contact}</span>
                                </div>
                                <div className="shopInfoItem">
                                    <span className="shopInfoItem__icon shopInfoItem__icon_addr"></span>
                                    <span className="shopInfoItem__text">{nearShop.address}</span>
                                </div>
                            </div>
                            :
                            <div className="nearShop_empty">您还没有配置数据哦~</div>
                    }
                </div>

            </div>
        );
    }

    _fetch() {
        var _self = this;

        _self._getNearShop();
        return;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (res) {
                var {latitude, longitude} = res.coords;
                _self._getNearShop(latitude, longitude);
            }, function (error) {
                _self._getNearShop();
            });
        } else {
            _self._getNearShop();
        }
    }

    _getNearShop(lat = 30.27415, lng = 120.15515) {
        var _self = this;

        Ajax.G('/openapi/CHome/nearbyStoresList', {
            page: 1,
            lat,
            lng
        }, function (res) {
            var data = res['result'];
            var nearShop = data.nearbyStoresList[0]

            if (!nearShop) {
                return;
            }
            if (nearShop.juli <= 100) {
                nearShop.juli = '100米以内';
            } else if (nearShop.juli <= 1000) {
                nearShop.juli = nearShop.juli + ' m';
            } else {
                nearShop.juli = (parseFloat(nearShop.juli) / 1000).toFixed(2) + ' km';
            }
            _self.setState({
                nearShop
            });
        });
    }
}

export default NearShop;
